<template>
  <el-card shadow="never">
    <div v-loading="loading">
      <p>
        <el-button round type="success" style="margin-right: 5px"
          >已审批</el-button
        >
        <el-button round type="warning" style="margin-right: 5px"
          >已审批-驳回</el-button
        >
        <el-button round type="danger" style="margin-right: 5px"
          >审批中</el-button
        >
        <el-button round type="info" style="margin-right: 5px"
          >待审批</el-button
        >
      </p>
      <br />
      <el-steps direction="vertical">
        <el-step
          v-for="(item, index) in nodeUsers"
          :key="index"
          :status="
            item.handleType == 0
              ? 'success'
              : item.handleType == 5
              ? 'process'
              : 'wait'
          "
        >
          <template #title>
            <p>
              <el-text
                class="mx-1"
                size="large"
                :type="
                  item.handleType == 0
                    ? 'success'
                    : item.handleType == 5
                    ? 'process'
                    : 'wait'
                "
                >{{ item.nodeName }}</el-text
              >
            </p>
            <p>
              <span
                v-for="(user, userIndex) in item.handleUsers"
                :key="userIndex"
              >
                <span
                  v-if="userIndex > 0 && userIndex < item.handleUsers.length"
                  >或
                </span>
                <el-button
                  plain
                  size="normal"
                  :type="
                    user.handleType == 0
                      ? 'success'
                      : user.handleType == 5
                      ? 'danger'
                      : user.handleType == 1
                      ? 'warning'
                      : 'info'
                  "
                  style="margin-right: 5px"
                  >{{ user.name }}</el-button
                >
              </span>

              <span v-if="item.readOnlyUsers && item.readOnlyUsers.length > 0"
                >抄送：</span
              >
              <span
                v-for="(user, userIndex) in item.readOnlyUsers"
                :key="userIndex"
              >
                <span
                  v-if="userIndex > 0 && userIndex < item.handleUsers.length"
                  >或
                </span>
                <el-button plain size="normal" style="margin-right: 5px">{{
                  user.name
                }}</el-button>
              </span>
            </p>
          </template>
          <template #description>
            <div v-for="(user, userIndex) in item.handleUsers" :key="userIndex">
              <div
                v-if="
                  user.handleType != 4 &&
                  user.handleType != 5 &&
                  user.handleType != null
                "
              >
                <br />
                <div>
                  <el-avatar size="normal">
                    {{ user.name.substr(0, 1) }}
                  </el-avatar>
                  <span>
                    <span> &nbsp;{{ user.name }} &nbsp;于 &nbsp;</span>
                    <span>{{ formatToDateTime(user.handlerTime) }}</span>
                    &nbsp;
                    <span>
                      <el-text
                        :underline="false"
                        v-if="user.handleType == 0"
                        type="success"
                        >通过</el-text
                      >
                      <el-text
                        :underline="false"
                        v-if="user.handleType == 1"
                        type="danger"
                        >拒绝</el-text
                      >
                      <el-text
                        :underline="false"
                        v-if="user.handleType == 2"
                        type="info"
                        >撤回</el-text
                      >
                      <el-text
                        :underline="false"
                        v-if="user.handleType == 3"
                        type="warning"
                        >转发</el-text
                      >
                    </span>
                  </span>
                  <p>
                    <br />
                    <el-text class="mx-1" size="normal">{{
                      user.comment
                    }}</el-text>
                  </p>
                  <p>
                    <FileViewer :fileId="user.resourceIds" />
                  </p>
                </div>
                <br />
              </div>
            </div>
          </template>
        </el-step>
      </el-steps>
    </div>
  </el-card>
</template>
<script setup>
import { ref, watch, nextTick, onMounted } from "vue";
import { useWorkTaskStore } from "@/stores/workTask";
import { formatToDateTime } from "@/utils/dateUtil";
import FileViewer from "./FileViewer.vue";

const loading = ref(false);
const oldFormData = ref("");
const nodeUsers = ref([]);

const props = defineProps({
  taskId: {
    type: String,
    default: "",
  },
  workflowInfo: {
    type: Object,
    default: () => {
      return {
        workflowId: "",
        versionNo: "",
        FormData: "",
      };
    },
  },
});

watch(
  () => props.taskId,
  () => {
    onTaskIdChange();
  },
  { deep: true }
);

watch(
  () => props.workflowInfo,
  () => {
    onWorkflowInfoChange();
  },
  { deep: true }
);

const workTaskStore = useWorkTaskStore();

const onTaskIdChange = () => {
  if (props.taskId && props.taskId.length > 0) {
    getForecastNodeUsers4Task(props.taskId);
  }
};
const onWorkflowInfoChange = () => {
  if (
    props.workflowInfo.workflowId &&
    props.workflowInfo.workflowId.length > 0
  ) {
    getForecastNodeUsers4Workflow(props.workflowInfo);
  }
};
const getForecastNodeUsers4Workflow = (workflowInfo) => {
  if (oldFormData == workflowInfo.formData) return;
  if(!workflowInfo.workflowId || workflowInfo.workflowId.length==0) return
  oldFormData.value = workflowInfo.formData;
  loading.value = true;
  workTaskStore.getForecastNodeUsers4Workflow(workflowInfo).then((res) => {
    nodeUsers.value = res;
    loading.value = false;
  });
};
const getForecastNodeUsers4Task = (taskId) => {
  loading.value = true;

  workTaskStore.getForecastNodeUsers4Task({ taskId }).then((res) => {
    nodeUsers.value = res;
    loading.value = false;
  });
};

nextTick(() => {
  onWorkflowInfoChange();
  onTaskIdChange();
});

onMounted(() => {
  onTaskIdChange();
});

defineExpose({ getForecastNodeUsers4Workflow, getForecastNodeUsers4Task });
</script>
